let btn = document.querySelector('.btn');
let item = document.querySelectorAll('.item');
let boxTop = document.querySelector('.boxTop');
let n =0;
let sum = -450;
btn.addEventListener('click',function(event){
    if(event.target.className == "left"){
        if(n==0){
            n=3;
            sum = -1800;
            boxTop.style.left = -1800+'px';
            boxTop.style.transition = "none";
        }else if(n<4){
            n--;
            sum = parseInt(sum) + 450 +'px';
            boxTop.style.transition = "1s ease";
            boxTop.style.left = sum;
        }
    }else if(event.target.className == "right"){
        if(n<4){        
            n++;
            boxTop.style.transition = "1s ease";
            sum = parseInt(sum) + (-450)+'px';
            console.log(sum);
            boxTop.style.left = sum;
        }else{
            boxTop.style.left = -450+'px';
            boxTop.style.transition = "none";
            sum = -450;
            n = 0;
        }
    }
})